<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #wrap {
            position: relative;
        }

        #wrap .item {
            width: 248px;
            height: 360px;
            font-size: 13px;
        }

        #wrap .item .tlite {
            width: 248px;
            height: 30px;
            font-size: 13px;
            line-height: 30px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        img {
            width: 220px;
            height: 160px;
        }

        .imgshow {
            width: 248px;
            text-align: center;
            display: table-cell;
        }
    </style>
</head>
<body>
<div class="cols">
    <input type="button" value="3列" class="btn" id="btn1">
    <input type="button" value="4列" class="btn" id="btn2">
    <input type="button" value="5列" class="btn" id="btn3">
</div>
<div id="wrap">
    <div class="item">
        <div class="imgshow">
            <img src="img/1.jpg">
        </div>
        <p class="tlite">这是一个tlitle标题</p>
        <p class="number">999</p>
    </div>
    <div class="item">
        <div class="imgshow">
            <img src="img/2.jpg">
        </div>
        <p class="tlite">这是一个tlitle标题</p>
        <p class="number">999</p>
    </div>
    <div class="item">
        <div class="imgshow">
            <img src="img/3.jpg">
        </div>
        <p class="tlite">这是一个tlitle标题</p>
        <p class="number">999</p>
    </div>
    <div class="item">
        <div class="imgshow">
            <img src="img/5.jpg">
        </div>
        <p class="tlite">这是一个tlitle标题</p>
        <p class="number">999</p>
    </div>
    <div class="item">
        <div class="imgshow">
            <img src="img/1.jpg">
        </div>
        <p class="tlite">这是一个tlitle标题</p>
        <p class="number">999</p>
    </div>
    <div class="item">
        <div class="imgshow">
            <img src="img/3.jpg">
        </div>
        <p class="tlite">这是一个tlitle标题</p>
        <p class="number">999</p>
    </div>
    <div class="item">
        <div class="imgshow">
            <img src="img/1.jpg">
        </div>
        <p class="tlite">这是一个tlitle标题</p>
        <p class="number">999</p>
    </div>
    <div class="item">
        <div class="imgshow">
            <img src="img/2.jpg">
        </div>
        <p class="tlite">这是一个tlitle标题</p>
        <p class="number">999</p>
    </div>
    <div class="item">
        <div class="imgshow">
            <img src="img/4.jpg">
        </div>
        <p class="tlite">这是一个tlitle标题</p>
        <p class="number">999</p>
    </div>


</div>
<script>
    var btn = document.getElementsByClassName('btn');

    var item = document.getElementsByClassName('item');
    var it_width = item[0].offsetWidth;
    btn[0].onclick = function () {
        ff(3);
    }
    btn[1].onclick = function () {
        ff(4);
    }
    btn[2].onclick = function () {
        ff(5);
    }

    
    function ff(colnum) {
        for (let i = 0; i < item.length; i++) {
            //求每个盒子占得的行数和列数  10 3行 1列--->11  3行 1列

            var row=parseInt(i/colnum);
            var col=parseInt(i%colnum);

            item[i].style.position='absolute';
            item[i].style.top=(row*it_width)+"px";
            item[i].style.left=(col*it_width)+"px";
        }
    }
    
    
    
    // function ff(row) {
    //     for (let i = 0; i < item.length; i++) {
    //         item[i].style.float = 'left';
    //         item[i].parentNode.style.width = (row * it_width) + "px";
    //     }
    // }

</script>
</body>
</html>